<template>
    <el-row justify="space-around">
        <el-col v-for="cp in caipin" :key="cp.cpid" :span="8">
            <el-form  style="width: 500px;height: 500px;background-color: #f8c06d">
                <el-form-item label="菜品id:">
                    {{cp.cpid}}
                </el-form-item>
                <el-form-item label="菜品名称:">
                    {{cp.cpmc}}
                </el-form-item>
                <el-form-item label="菜品类型:">
                    {{cp.cptp}}
                </el-form-item>
                <el-form-item label="菜品单价:">
                    {{cp.cpdj}}
                </el-form-item>
                <el-form-item label="菜品数量:">
                    {{cp.cpsl}}
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="reduce(cp)">-</el-button>
                    <el-button type="primary" @click="add(cp)">+</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="8">
            <el-form style="width: 500px;height: 500px;background-color: #f8c06d">
                <el-form-item>
                    {{caipinList}}
                </el-form-item>
                <el-form-item>
                    <span>总价:{{total}}</span>
                </el-form-item>
                <el-form-item>
                    <span>{{showYhDd}}</span>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">提交订单</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";

const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'))

const caipin = ref([
    {
        sjid:1,
        cpid:1,
        cpmc:'麻辣烫',
        cptp:'1',
        cpdj:20,
        cpsl:0,
    },
    {
        sjid: 1,
        cpid:2,
        cpmc:'冰美式',
        cptp:'1',
        cpdj:30,
        cpsl:0,
    }
])

const sj = ref({
    sjid:1,
    name:'杨国福',
    qsf:9,
    dbf:1,
    psf:2,
})
const showYhDd = ref({

})

const total = computed(() => {
    let total = 0;
    caipinList.value.forEach(item => {
        total += item.cpdj * item.cpsl;
    });
    showYhDd.value.total = total;
    return total;
});

const caipinList = ref([])
const reduce = (cp) => {
    if (cp.cpsl > 0) {
        cp.cpsl--;
        // 从 caipinList 中移除数量为 0 的菜品
        const index = caipinList.value.findIndex(item => item.cpid === cp.cpid);
        if (index!== -1 && cp.cpsl === 0) {
            caipinList.value.splice(index, 1);
        }
    }
}
const add = (cp) => {
    cp.cpsl++;
    // 若 caipinList 中不存在该菜品，则添加
    const index = caipinList.value.findIndex(item => item.cpid === cp.cpid);
    if (index === -1) {
        caipinList.value.push(cp);
    }
}

const submit = async () => {
    const shanghaiDate = new Date(Date.now() + 8 * 60 * 60 * 1000);
    showYhDd.value.ddsj = shanghaiDate.toISOString().slice(0, 19).replace('T', ' ');
    showYhDd.value.caiPin = caipinList.value;
    showYhDd.value.yhid = userInfo.value.yhid;
    showYhDd.value.yhnc = userInfo.value.yhnc;
    showYhDd.value.phone = userInfo.value.phone;
    showYhDd.value.sjid = sj.value.sjid;
    showYhDd.value.name = sj.value.name;
    showYhDd.value.psf = sj.value.psf;
    showYhDd.value.dbf = sj.value.dbf;
    showYhDd.value.ddzt = '已支付';
    showYhDd.value.dddz = '北京市海淀区';
    showYhDd.value.ddbz = '无';
    showYhDd.value.total = total.value;

    const {data} = await axios.post('/api/showYhDd',showYhDd.value)
    if(data.code === 200){
        ElMessage.success('订单提交成功');
    }
}
</script>

<style scoped>
.el-form-item--default{
    font-size: 20px;
    color: black;
}
</style>